<template>
	<div ref="searchMoreRef" :class="['tui-search-more', !isPC && 'tui-search-more-h5']">
		<div class="more" @click="toggleMore()">
			<Icon class="more-icon" :file="searchMoreSVG" :width="isPC ? '28px' : '34px'"
				:height="isPC ? '28px' : '34px'" />
		</div>
		<ul v-if="isListShow" class="tui-search-more-list">
			<li v-for="(extension, index) in extensionList" :key="index" class="list-item"
				@click="handleMenu(extension)">
				<Icon v-if="extension.icon" class="list-item-icon" :file="extension.icon" />
				<div class="list-item-title">
					{{ extension.text }}
				</div>
			</li>
			<li @click="to_saoma()" class="list-item">
				<view class="iconfont icon-saoma more-icon"></view>
				<view class="list-item-title">扫一扫</view>
			</li>
		</ul>
		<powers ref="childRef"></powers>
	</div>
</template>
<script lang="ts" setup>
	import { ref, watch, onMounted } from '../../../adapter-vue';
	import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
	import TUICore, { ExtensionInfo, TUIConstants } from '@tencentcloud/tui-core';
	import { outsideClick, TUIGlobal } from '@tencentcloud/universal-api';
	import Icon from '../../common/Icon.vue';
	import searchMoreSVG from '../../../assets/icon/search-more.svg';
	import powers from '@/components/powers/powers.vue';
	import { isPC, isUniFrameWork } from '../../../utils/env';
	const props = defineProps({
		searchType: {
			type: String,
			default: 'global', // "global" / "conversation"
			validator(value : string) {
				return ['global', 'conversation'].includes(value);
			},
		},
	});

	const searchMoreRef = ref<HTMLElement | null>();
	const isListShow = ref<boolean>(false);
	const toggleMore = () => {
		isListShow.value = !isListShow.value;
		if (!isUniFrameWork && isListShow.value) {
			outsideClick.listen({
				domRefs: searchMoreRef.value,
				handler: closeSearchMore,
			});
		}
	};
	const extensionList = ref<ExtensionInfo[]>([]);

	const handleMenu = (item : ExtensionInfo) => {
		const { listener = { onClicked: () => { } } } = item;
		listener?.onClicked?.(item);
		toggleMore();
	};

	//扫一扫授权
	const childRef = ref(null);
	const to_saoma = async () => {
		childRef.value.open({
			powersType: 'POWERS_CAMERA',
			success: () => {
				////////////
				console.log('授权完成')
				uni.scanCode({
					success: res => {
						let obj = {};
						let str_arr = String(res.result).split('?');
						if (str_arr.length == 2) {
							let arr = String(str_arr[1]).split('&').map(val => {
								return val.split('=');
							})
							arr.forEach(val => {
								if (val && val.length == 2) {
									obj[val[0]] = val[1];
								}
							});

						}
						console.log('扫码参数', obj.invite);
						let conversationID = obj.invite
						uni.navigateTo({
							url: `/pages/gqrcodeContactInfo/index?conversationID=${encodeURIComponent(conversationID)}`,
						});
					}
				})
				////////////
			}
		});
	}




	const closeSearchMore = () => {
		isListShow.value = false;
	};

	onMounted(() => {
		// extensions
		extensionList.value = [
			...TUICore.getExtensionList(TUIConstants.TUISearch.EXTENSION.SEARCH_MORE.EXT_ID),
		];
		// hide conversation header
		TUICore.callService({
			serviceName: TUIConstants.TUIConversation.SERVICE.NAME,
			method: TUIConstants.TUIConversation.SERVICE.METHOD.HIDE_CONVERSATION_HEADER,
			params: {},
		});
	});

	watch(
		() => isListShow.value,
		() => {
			if (isListShow.value) {
				TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
					isSearching: false,
					searchType: props.searchType,
				});
			}
		},
	);
</script>

<style lang="scss" scoped>
	.more-icon {
		font-size: 34rpx;
		margin-right: 10rpx;
		color: #32343A;
	}

	.tui-search-more {
		display: flex;
		flex-direction: column;
		position: relative;

		.more {
			width: 28px;
			height: 28px;
			margin-right: 6px;
		}

		&-list {
			margin: 10px 0;
			position: absolute;
			list-style: none;
			cursor: pointer;
			right: 6px;
			top: 20px;
			z-index: 1000;
			background: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			padding: 0;
			box-shadow: rgba(0, 0, 0, 0.16) 0 3px 6px, rgba(0, 0, 0, 0.23) 0 3px 6px;

			.list-item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 40px;
				padding: 0 10px;

				&-icon {
					margin-right: 2px;
				}

				&-title {
					font-size: 14px;
					text-wrap: nowrap;
					word-break: keep-all;
				}
			}
		}
	}

	.tui-search-more-h5 {
		float: right;

		.more {
			width: 34px;
			height: 34px;
		}
	}
</style>